<template>
    <form  rel="itemForm" class="form-horizontal row item-form" style="position: relative;">
        <div  :key="'itemform' + index" v-for="(item, index) in value" :class="item.className ? item.className : 'col-md-12'">
            <div v-if="(action ==='edit' && item.edit) ||　(action === 'add' && item.add)">
                <slot :name="item.key">
                    <label :for="'input' + item.key" class="control-label">
                        {{ item.label ? item.label : item.key }}
                        <span v-if="item.key === 'clean_fee' && item.edit"
                              v-tooltip.top="'Get Fixed Clean Fee'">
                                         <a href="javascript:void(0)" class="btn-xs" @click="getFixedCleanFee(item)">
                                            <i class="fif fif-clean fa-fw"></i>
                                         </a>
                                    </span>
                        <span v-if="item.required" class="text-danger">*</span>
                    </label>

                    <input v-if="item.inputType === 'password'" :id="'input' + item.key" name="_password"
                           class="form-control" type="password" v-model="item.value">

                    <div v-else-if="item.inputType === 'checkbox' || item.inputType === 'reversecheckbox'"
                         class="checkbox checkbox-danger checkbox-circle"
                         style="display: inline-block;">
                        <input type="checkbox" v-model="item.value" class="my-checkbox">
                        <label style="padding-top: 7px"></label>
                    </div>

                    <input-tags v-else-if="item.inputType === 'tags'" :className="item.key"
                                v-model="item.value"></input-tags>

                    <input v-else-if="item.inputType === 'number'" :id="'input' + item.key"
                           class="form-control"
                           type="number" :min="item.min" :max="item.max" v-model="item.value">

                    <input v-else-if="item.inputType === 'upload'" class="form-control" type="file"
                           @change="getFile($event, item)" id="file"/>

                    <textarea v-else-if="item.inputType === 'textarea'" :id="'input' + item.key"
                              class="form-control"
                              v-model="item.value" rows="2" style="height: 100px;resize: vertical;"></textarea>

                    <v-select v-else-if="item.inputType === 'select'"
                              v-model="item.value"
                              :options="item.options"
                              :searchable="true"
                              :multiple="item.multiple">
                    </v-select>

                    <MySelect
                            v-else-if="item.inputType === 'myselect'"
                            :defaultLabel="item.defaultLabel"
                            @input="onVSelectInput(item)"
                            :id="item.key"
                            v-model="item.value"
                            :options="item.options"
                            :multiple="item.multiple"
                            :ajax="item.ajax"
                            :minimumInputLength="item.minimumInputLength ? item.minimumInputLength : 0"
                    >
                    </MySelect>

                    <input v-else-if="item.inputType === 'date' || item.inputType === 'datetime'"
                           :id="'input' + item.key" v-model="item.value"
                           type="date" class="form-control">

                    <input-select v-else-if="item.inputType === 'inputSelect'" :options="item.options"
                                  v-model="item.value"></input-select>

                    <select class="form-control" v-else-if="item.inputType === 'normalSelect'"
                            v-model="item.value">
                        <option  :key="'option' + index" v-for="(option, index) in item.options" :value="option.value">{{option.label}}
                        </option>
                    </select>

                    <input v-else-if="item.inputType === 'user'" :id="'input' + item.key"
                           class="form-control" type="text"
                           v-model="item.value">

                    <div v-else-if="item.inputType === 'money'">
                        <select class="form-control" style="display: inline-block; width: 30%;"
                                v-model="item.currencyVal">
                            <option  :key="'currency' + index" v-for="(option, index) in item.currencyOptions" :value="option">{{option}}
                            </option>
                        </select>
                        <input style="display: inline-block; width: 68%;" :id="'input' + item.key"
                               class="form-control" type="number"
                               v-model="item.value">
                    </div>

                    <CompactPicker
                            v-else-if="item.inputType === 'compactpicker'" v-model="item.value"
                    >

                    </CompactPicker>

                    <flatPickr
                            @on-close="selectDate($event, item)"
                            v-else-if="item.inputType === 'datetimepicker'"
                            v-model="item.value"
                            :config="{enableTime: true, dateFormat: 'Y-m-d H:i:S',  static: true, time_24hr: true}"
                            class="form-control"
                            :input-id="item.key">
                    </flatPickr>

                    <div v-else-if="item.inputType === 'box'">
                        <select class="form-control" style="display: inline-block; width: 30%;"
                                v-model="item.selectedVal">
                            <option  :key="'selectoption' + index" v-for="(option, index) in item.selectOptions" :value="option">{{option}}</option>
                        </select>
                        <input style="display: inline-block; width: 68%;" :id="'input' + item.key"
                               class="form-control" type="text"
                               v-model="item.value">
                    </div>

                    <div v-else-if="item.inputType === 'imgBox'">
                        <a v-if="item.value" :href="genSrc(item.value)" target="_blank">
                            <img width="50%" :src="genSrc(item.value)" alt="">
                        </a>
                    </div>

                    <input v-else :id="'input' + item.key" class="form-control" type="text"
                           v-model="item.value">
                </slot>
            </div>
            <div v-else-if="(action === 'edit' || action === 'show') && !item.hideInEdit">
                <label class="control-label">{{item.label}}</label>
                <textarea v-if="item.inputType === 'textarea'" :id="'input' + item.key"
                          class="form-control"
                          v-model="item.value" rows="2" style="height: 100px;resize: vertical;"  readonly="readonly"></textarea>
                <input  v-else class="form-control" type="text" readonly="readonly" :value="item.value">
            </div>
        </div>
        <div style="clear: both"></div>
    </form>
</template>

<script>
    import 'flatpickr/dist/flatpickr.css';
    import flatPickr from 'vue-flatpickr-component';
    import DateButton from '@/components/widgets/Datepicker/DateButton'
    import InputTags from '@/components/widgets/InputTags'
    import CleanTime from '@/components/widgets/CleanTime'
    import InputSelect from '@/components/widgets/InputSelect'
    import MySelect from '@/components/widgets/MySelect'
    import CompactPicker from '@/components/widgets/CompactPicker'
    import vSelect from 'vue-select'
    export default {
        name: "ItemForm",
        props: ['value', 'action'],
        components: {DateButton, InputTags, CleanTime, InputSelect, MySelect, CompactPicker, vSelect, flatPickr},
        methods: {
            onVSelectInput(item) {
                this.$emit('myselect-item', item)
            },
            getFile() {
                this.$emit('get-file', event.target.files[0])
            },
            getFixedCleanFee(item) {
                this.$emit('get-clean-fee', item)
            },
            genSrc(obj) {
                obj = JSON.parse(obj)
                return obj.url
            },
            selectDate(arr, item) {
                item.value = moment(arr[0]).format('YYYY-MM-DD HH:mm:ss')
            }
        }
    }
</script>

<style lang="stylus">
    .item-form
        .flatpickr-wrapper
            width :100% !important;
        .flatpickr-input
            background-color :#fff;
        .my-checkbox
            margin-top :10px !important;
</style>